Days
Hours
Minutes
Seconds

Features:

  • counts time till exact date;
  • has custom skin designs.

Description

Files needed to work with the timer:

  • jquery-1.7.1.min.js – jQuery library (the timer will work with this version of library only);
  • jquery.countdown.min.js – the timer functionality;
  • demo.css – the set of CSS styles for the timer stylization.

Please include the following files in the <head> section of HTML file to start working with the timer:

<link rel="stylesheet" href="css/demo.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>

The HTML Timer Structure:

<div id="counter"></div>
<div class="counter_desc">
	<div class="days">Days</div>
	<div class="hours">Hours</div>
	<div class="minutes">Minutes</div>
	<div class="seconds">Seconds</div>
</div>

Initialization

You can find code for the timer initialization in the end of the jquery.countdown.min.js file:

$(document).ready(function(){
	var _date=new Date()
		,countdown_to={
			year:2013
			,month:6 
			,date:13
			,hours:0
			,minutes:15
			,seconds:00
		}
	
	_date.setFullYear(countdown_to.year,countdown_to.month,countdown_to.date)
	_date.setHours(countdown_to.hours)
	_date.setMinutes(countdown_to.minutes)
	_date.setSeconds(countdown_to.seconds)
	
	/*code for demonstration*/
	_date=new Date()
	_date.setMonth(_date.getMonth()+8)
	/*end code for demonstration*/
		
	$('#counter').countdown({
		image: 'images/digits_inverted.png',
		startTime: _date,
		stepTime: 35
	});	
});

The initialization occurs on the event $(document).ready().

Parameters:
  • image – shows path to the image which will be used as a skin (the directory images contains files that you can use as skins for the timer);
  • startTime – sets the final date of the countdown. Time countdown is implemented with  the help of variable _date;
  • stepTime – sets cycle rate of numbers’ animation.

The demo version shows the time that remains from the current date plus 8 months. That is why timer starts a new countdown every time you refresh the demo page. Here is a code where you can edit these parameters:

	
	/*code for demonstration*/
	_date=new Date()
	_date.setMonth(_date.getMonth()+8)
	/*end code for demonstration*/

If you want to set exact date, you should change variable _date. To do this you must change values for year, month(pay attention that months’ numbering starts from zero), date, hours, minutes, seconds. Here is a piece of code where you can change these parameters:

$(document).ready(function(){
	var _date=new Date()
		,countdown_to={
			year:2013
			,month:6 
			,date:13
			,hours:0
			,minutes:15
			,seconds:00
		}
});

Also you have to delete the following code:


	/*code for demonstration*/
	_date=new Date()
	_date.setMonth(_date.getMonth()+8)
	/*end code for demonstration*/

Color themes

Below you’ll find examples of skin solutions for the timer. All these skins you can find in images directory.

Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits_inverted.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_blue.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_green.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_orange.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_purple.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_red.png',
});
Days
Hours
Minutes
Seconds
$('#counter').countdown({
	image: 'images/digits2_yellow.png',
});